<template>
  <div class="preview-question">
    <!-- 第一行 -->
    <el-row class="firstrow">
      <el-col :span="6"
        ><span
          >【题型】：{{ examinedialog.questionType | formatter }}</span
        ></el-col
      >
      <el-col :span="6"
        ><span>【编号】：{{ examinedialog.id }}</span></el-col
      >
      <el-col :span="6"
        ><span
          >【难度】：{{ examinedialog.difficulty | formattert }}</span
        ></el-col
      >
      <el-col :span="6"
        ><span>【标签】：{{ examinedialog.tags }}</span></el-col
      >
    </el-row>
    <!-- 第二行 -->
    <el-row class="sceondrow">
      <el-col :span="6"
        ><span>【学科】：{{ examinedialog.subjectName }}</span></el-col
      >
      <el-col :span="6"
        ><span>【目录】：{{ examinedialog.directoryName }}</span></el-col
      >
      <el-col :span="6"
        ><span>【方向】：{{ examinedialog.direction }}</span></el-col
      >
    </el-row>
    <el-divider></el-divider>
    <el-row class="thirdrow">
      <el-col :span="6"
        ><span v-html="`【题干】：${examinedialog.question}`"></span
      ></el-col>
    </el-row>

    <!-- 单选 -->
    <div v-if="examinedialog.questionType === '1'">
      <div>
        {{
          examinedialog.questionType | formatter
        }}题&nbsp;&nbsp;选项:(以下选中的选项为正确答案)
      </div>
      <div v-for="item in examinedialog.options" :key="item.id">
        <el-radio :key="item.id" :value="item.code" v-if="item.isRight === 0">{{
          item.title
        }}</el-radio>
        <el-radio v-else>{{ item.title }}</el-radio>
      </div>
    </div>

    <!-- 多选 -->
    <div v-if="examinedialog.questionType === '2'">
      <div>
        {{
          examinedialog.questionType | formatter
        }}题&nbsp;&nbsp;选项:(以下选中的选项为正确答案)
      </div>
      <div v-for="item in examinedialog.options" :key="item.id">
        <el-checkbox
          :key="item.id"
          :value="item.code"
          v-if="item.isRight === 0"
          >{{ item.title }}</el-checkbox
        >
        <el-checkbox :key="item.id" checked v-else>{{
          item.title
        }}</el-checkbox>
      </div>
    </div>

    <!-- 简答 -->
    <div v-if="examinedialog.questionType === '3'">
      <div>
        {{
          examinedialog.questionType | formatter
        }}题&nbsp;&nbsp;选项:(以下选中的选项为正确答案)
      </div>
    </div>

    <el-divider></el-divider>

    <!-- 视频 -->
    <div>
      【参考答案】：<el-button type="danger" @click="videostart"
        >视频答案预览</el-button
      >
      <div v-if="videoVisible" class="bvideo">
        <video
          class="mvideo"
          controls
          :src="examinedialog.videoURL"
          autoplay
        ></video>
      </div>
    </div>
    <el-divider></el-divider>

    <!-- 答案解析 -->
    <span v-html="`【答案解析】：${examinedialog.answer}`"></span>

    <el-divider></el-divider>

    <!-- 备注 -->
    <div>【题目备注】：{{ examinedialog.remarks }}</div>
    <div slot="footer" class="dialog-footer">
      <div class="btn">
        <el-button type="primary" @click="calcelSubmit">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  name: 'PreviewQuestion',
  data () {
    return {
      // 弹框显示与隐藏
      dialogVisible: false,
      radio: '',
      videoVisible: false
    }
  },
  props: {
    examinedialog: {
      type: Object,
      default: () => ({})
    }
  },
  filters: {
    // 格式化
    formatter (cellValue) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = questionType.find((item) => item.value === Number(cellValue))
      // console.log(obj)
      return obj ? obj.label : ''
    },
    formattert (cellValue) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = difficulty.find((item) => item.value === Number(cellValue))
      // console.log(obj)
      return obj ? obj.label : ''
    }
  },
  methods: {
    // 视频播放
    videostart () {
      this.videoVisible = true
    },

    // 关闭弹窗
    calcelSubmit () {
      this.$emit('closeDialog')
    }
  }
}
</script>

<style scoped >
.firstrow {
  padding-bottom: 10px;
}
.sceondrow {
  padding-top: 10px;
  padding-bottom: 10px;
}
.thirdrow {
  padding-bottom: 10px;
}
.el-divider {
  margin: 12px 0;
}
.dialog-footer {
  position: relative;
  margin-top: 40px;
}
.bvideo {
  width: 400px;
  height: 300px;
}
.mvideo {
  width: 100%;
  height: 100%;
}
.el-radio {
  margin-top: 10px;
}
.btn {
  position: absolute;
  right: 20px;
  bottom: 5px;
}
</style>
